<template>
  <x-main>
    <x-empty :show="$emptyArray(orderBillList)"></x-empty>
    <view class="x-normal-top" v-for="(item, index) in orderBillList">
      <x-preview @click="onClick(item)" :title="`${item.currentPeriod}/${item.totalPeriod}期（${format(item.billState) || '-'}）`" :columns="col" :data="item">
        <view slot="tools" class="x-text-primary">已付{{item.paidAmount || 0}}元/总{{item.billAmount || 0}}元</view>
        <template #bottom>
          <view v-if="item.billState == BILL.KEY.WAIT_PAY || item.billState == BILL.KEY.OVERDUE || item.billState == BILL.KEY.IN_OVERDUE_PAY" class="x-row-reverse">
            <view @click="onOfflinePay(item)" class="x-small-btn x-small-left x-btn-primary">线下支付</view>
            <view @click="onReduction(item)" class="x-small-btn x-btn-primary">费用减免</view>
          </view>
        </template>
      </x-preview>
    </view>
  </x-main>
  <x-offline-pay @success="handleSuccess" ref="offlinePayRef"></x-offline-pay>
  <x-reduction @success="handleSuccess" ref="reductionRef"></x-reduction>
</template>

<script setup>
import XPreview from '@/components/lib/preview'
import XOfflinePay from '@/components/logic/bill/offlinePay'
import XReduction from '@/components/logic/bill/reduction'
import billStore from '@/stores/modules/bill';
const BillStore = billStore();
const {orderBillList} = storeToRefs(BillStore);
import {ref} from 'vue';
import {onLoad, onShow} from "@dcloudio/uni-app";
import {storeToRefs} from "pinia";
import {Helper, Constant} from 'core';
const col = ref([
  {label: "还款金额", field: "billAmount", format:(option, data) => {
      return `已付${data.paidAmount}元/总${data.billAmount || 0}元`;
    }},
  {label: "减免金额", field: "billAmount1", format:(option, data) => {
      let row = getAmount(data, 'COST_REDUCE');
      return Helper.emptyJson(row) ? "0元" : `${row.changeAmount}元`
    }},
  {label: "线下支付", field: "billAmount2",format:(option, data) => {
      let row = getAmount(data, 'OFFLINE_PAY');
      return Helper.emptyJson(row) ? "0元" : `${row.changeAmount}元`
    }},
  {label: "还款日期", field: "billPaymentDate"},
])

const orderNo = ref("");
onLoad(option => {
  orderNo.value = option.orderNo;
})

onShow(() => {
  BillStore.getListByOrderNo(orderNo.value);
})

/**
 * 减免、线下支付操作成功回调
 */
const handleSuccess = () => {
  BillStore.getListByOrderNo(orderNo.value);
}

const offlinePayRef = ref(null);
const reductionRef = ref(null);
const onOfflinePay = (data) => {
  offlinePayRef.value.open(data.billId);
}

const onReduction = (data) => {
  reductionRef.value.open(data.billId, data.billAmount);
}

const onClick = (item) => {
  uni.navigateTo({url: "/pages/bill/detail?billId=" + item.billId})
}

const getAmount = (data, type) => {
  if(! Helper.emptyArray(data.reduceList)) {
    let row = data.reduceList.find(x => x.fundChangeProject == type);
    return Helper.emptyJson(row) ? {} : row;
  }
  return {};
}

const format = (value) => {
  let obj =  Constant.BILL.STATUS.find(x => x.value == value);
  if(Helper.emptyJson(obj)) {
    return "";
  }
  return obj.label;
}
</script>

<style scoped lang="less">

</style>
